<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成易博客-登陆</title>
    <link rel="stylesheet" href="static/css/cinui.css"/>
    <link rel="stylesheet" href="static/layui-v2.6.8/layui/css/layui.css" media="all">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="static/layui-v2.6.8/layui/layui.js" charset="utf-8"></script>
    <script src="static/js/jquery-3.6.js"></script>
    <!--  图标库  -->
    <link href="static/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body style="background: rgb(246,248,244)" background="code7.html">

<div class="layui-col-lg4 layui-col-md6 layui-col-sm10 layui-col-xs10 layui-col-lg-offset4 layui-col-md-offset3 layui-col-sm-offset1 layui-col-xs-offset1 formClass"
     style="margin-top: 5%;background: white">
    <div class="layui-tab layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
        <ul class="layui-tab-title layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12"
            style="text-align: center;">
            <li class="layui-this">账号登陆</li>
            <li>短信登陆</li>
        </ul>
        <div class="layui-tab-content layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-tab-item layui-show layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
                <form class="layui-form layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12 layui-col-lg-offset3 layui-col-md-offset1  layui-col-sm-offset2"
                      action="user/login" method="post" style="margin-top: 5%;">
                    <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
                        <label class="layui-form-label"><span class="layui-icon layui-icon-username"></span></label>
                        <div class="layui-input-inline">
                            <input type="text" name="userName" required lay-verify="required" placeholder="用户名"
                                   autocomplete="off"
                                   class="layui-input layui-col-lg12  layui-col-md12 layui-col-sm12 layui-col-xs12">
                        </div>
                        <div class="layui-form-mid layui-word-aux"></div>
                    </div>
                    <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
                        <label class="layui-form-label"><span class="layui-icon layui-icon-password"></span></label>
                        <div class="layui-input-inline">
                            <input type="password" name="userPwd" required lay-verify="required" placeholder="密码"
                                   autocomplete="off"
                                   class="layui-input layui-col-lg12  layui-col-md12 layui-col-sm12 layui-col-xs12">
                        </div>
                        <div class="layui-form-mid layui-word-aux"></div>
                    </div>
                    <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-inline">
                            <button class="layui-btn layui-btn-normal layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12"
                                    lay-submit lay-filter="formDemo">登陆
                            </button>
                        </div>
                    </div>
                    <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-inline">
                            <span class="layui-col-lg-offset6 layui-col-md-offset6  layui-col-sm-offset6 layui-col-xs-offset5">
                                <a href="register.html">注册</a>
                                <a href="javaScript:;">找回密码</a>
                            </span>
                        </div>
                    </div>
                </form>
            </div>


            <div class="layui-tab-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
                <form class="layui-form layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12 layui-col-lg-offset3 layui-col-md-offset1  layui-col-sm-offset2"
                      action="user/login" method="post" style="margin-top: 5%;">
                    <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
                        <label class="layui-form-label"><span class="layui-icon layui-icon-cellphone"></span></label>
                        <div class="layui-input-inline">
                            <input type="text" id="userPhone" name="userPhone" required phone
                                   lay-verify="required|phone" placeholder="手机号" autocomplete="off"
                                   class="layui-input layui-col-lg12  layui-col-md12 layui-col-sm12 layui-col-xs12">
                        </div>
                        <div class="layui-word-aux cinUiInline" id="info2"></div>
                    </div>
                    <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-inline">
                            <button class="layui-btn layui-btn-normal layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12"
                                    onclick="getCode()" id="Code">获取验证码
                            </button>
                        </div>
                    </div>
                    <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
                        <label class="layui-form-label"><span class="layui-icon layui-icon-vercode"></span></label>
                        <div class="layui-input-inline">
                            <input type="text" id="SmsCode" name="SmsCode" required lay-verify="required"
                                   placeholder="验证码" autocomplete="off"
                                   class="layui-input layui-col-lg12  layui-col-md12 layui-col-sm12 layui-col-xs12"
                                   onblur="codeStatus()">
                        </div>
                        <div class="layui-form-mid layui-word-aux" id="info3"></div>
                    </div>
                    <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-inline">
                            <button class="layui-btn layui-btn-normal layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12"
                                    id="submit" lay-submit lay-filter="formDemo">登陆
                            </button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>

</div>
<script>


    var submit = document.getElementById("submit");//获取注册按钮的id
    //验证码发送
    function getCode() {
        $.post({
            url: "user/getCode",
            data: {"userPhone": $('#userPhone').val()},
            async: true,
            success: function (data) {
                $('#info2').html(data);//获取后台数据绑定到 div上
                var Code = document.getElementById("Code");//获取注册按钮的id
                if (data.toString() === '发送成功') {//如果验证码发送成功，则将按钮设置为不可点击
                    Code.setAttribute('class', 'layui-btn layui-btn-primary submitStyleButton layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12');
                } else {
                    Code.setAttribute('class', 'layui-btn layui-btn-normal layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12');
                }
            }
        })
    }

    //验证码验证
    function codeStatus() {
        $.post({
            url: "user/codeStatus",
            data: {"SmsCode": $('#SmsCode').val()},
            async: true,
            success: function (data) {
                $('#info3').html(data);//获取后台数据绑定到 div
                var codeStatus = document.getElementById("SmsCode");
                if (data.toString() === '验证码错误') {//验证码错误不允许注册
                    submit.setAttribute('class', 'layui-btn layui-btn-primary submitStyleButton layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12');
                } else {
                    submit.setAttribute('class', 'layui-btn layui-btn-normal layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12');
                }
            }
        })
    }
</script>

</body>
</html>